<template>
    <div class="con">
        <div style="margin: 20px;" class="detail-con">
            <div>流量账户</div>
            <!-- <div><el-button type="primary" @click="detailfn">详情</el-button></div> -->
        </div>
        <div class="header">
            <div class="internet">
                <div class="title">已用总流量</div>
                <div class="num">50GB</div>
            </div>
            <div class="internet">
                <div class="title">剩余总流量</div>
                <div class="num">50GB</div>
            </div>
        </div>
        <div class="table-internet">
            <!-- 标签页先注释掉, 后续版本再看 -->
            <div class="tab-area">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="流量消耗明细" name="internet" />
                    <el-tab-pane label="视频消耗明细" name="video" />
                </el-tabs>
            </div>
            <!-- 数据表格 -->
            <div class="table-container">
                <el-table :data="tableData" style="width: 100%;margin-top: 20px" border stripe
                    :header-cell-style="{ background: '#f5f7fa' }">
                    <!-- 表格列定义保持不变 -->
                    <el-table-column prop="timeRange" label="日期" min-width="160" />
                    <el-table-column prop="k" v-if="activeTab == 'video'" label="直播名称" min-width="120" />
                    <el-table-column prop="m" v-if="activeTab == 'video'" label="开播时间" min-width="120" />
                    <el-table-column prop="totalUsage" label="流量总消耗(GB)" min-width="160" />
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination v-model:currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
                        :total="pagination.total" :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" background="true" />
                </div>
            </div>
        </div>
    </div>

    <DetailsDrawer v-model:visible="drawerVisible" :row-data="detailRowData" />
</template>

<script setup>
import { teodata } from "@/api/internet";
import DetailsDrawer from './internetDetail.vue';
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'
// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})

// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible'])
// 抽屉详情
const drawerVisible = ref(false);
// 当前选中的行数据
const detailRowData = ref({});
// 标签页激活项
const activeTab = ref('internet');

const tableData = ref([
    {
        userId: '1',
        time: '2025-07-28',
        total: '1006'
    }
]);


// 分页配置
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
function formatToISO8601WithOffset(date) {
  const pad = (n) => n.toString().padStart(2, '0');
  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());
  const seconds = pad(date.getSeconds());

  // 东八区偏移
  const offset = '+08:00';

  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}${offset}`;
}
const fetchData = () => {
    const startTime = formatToISO8601WithOffset(
        new Date(Date.now() - 6 * 24 * 60 * 60 * 1000) // 取最近 7 天
    );
    const endTime = formatToISO8601WithOffset(new Date());
    const parmas = {
        token: localStorage.getItem('token'),
        pageNum: pagination.currentPage,
        pageSize: pagination.pageSize,
        zoneId: '*',
        startTime,
        endTime,
    }
    teodata(parmas)
        .then((res) => {
            if (res.code === 200) {
                tableData.value = res.data
                pagination.total = res.data.totalCount;
            }
        })
        .catch((err) => {
            console.error('发送失败:', err);
        });
}

//  首次加载 
fetchData()


// 分页大小变化
const handleSizeChange = (size) => {
    pagination.pageSize = size;
    fetchData();
};

// 当前页变化
const handleCurrentChange = (page) => {
    pagination.currentPage = page;
    fetchData();
}
// 查看详情
const detailfn = (row) => {
    detailRowData.value = row;
    drawerVisible.value = true;
};

</script>

<style scoped lang="scss">
.con {
    background: #fff;
    overflow: hidden;

    .detail-con {
        display: flex;
        justify-content: space-between;
    }
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 20px;

    .internet {
        height: 66px;
        background: #F7F7F7;
        border-radius: 10px;
        width: 49%;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        margin-top: -20px;

        .title {
            margin-top: 12px;
            margin-left: 12px;
            font-size: 14px;
            color: #999999;
        }

        .num {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 16px;
            color: #2D7AF7;
            margin-left: 12px;
        }
    }
}

.tab-area {
    margin-bottom: 20px;
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

.custom-pagination {
    --el-pagination-hover-bg-color: #f5f7fa;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #606266;
    --el-pagination-button-disabled-bg-color: #f5f7fa;
    --el-pagination-button-disabled-text-color: #c0c4cc;
}

.pagination-pages {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    color: #409eff;
}

.pagination-btn.active {
    background-color: #409eff;
    color: #fff;
    border-color: #409eff;
}

.pagination-btn.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.table-internet {
    margin: 20px;
}
</style>